<template>
  <div ref="histogram" class="histogram" />
</template>

<script>

import * as echarts from 'echarts'
export default {
  name: 'VueAdminTemplateMasterHistogram',

  data() {
    return {

    }
  },

  mounted() {
    var myChart = echarts.init(this.$refs.histogram, 'dark')
    var option = {
      title: {
        text: '订单退单柱状图',
        textStyle: {
          color: '#95a3ce',
          fontSize: 20

        },
        left: 20,
        top: 20
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: 60,
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: false
          }
        }
      ],
      legend: {
        bottom: 0,
        left: 'center'
      },
      series: [
        {
          name: '订单',
          type: 'bar',
          barWidth: '60%',
          data: [],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#7e05e3'
              }, {
                offset: 1, color: '#b91fda'
              }],
              global: false
            }
          }
        },
        {
          name: '退单',
          type: 'bar',
          barWidth: '60%',
          data: [],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#24caff'
              }, {
                offset: 1, color: '#2492ff'
              }],
              global: false
            }
          }
        }
      ]
    }
    for (var i = 0; i < 79; i++) {
      option.xAxis[0].data.push(`data${i}`)
      option.series[0].data.push(parseInt(Math.random() * 100))
      option.series[1].data.push(parseInt(Math.random() * 100))
    }
    myChart.setOption(option)
  },

  methods: {

  }
}
</script>

<style scoped lang="scss">
    .histogram{
        width: 100%;
        height: 100%;
    }
</style>
